<head>
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <!-- SlidesJS Required: Link to jquery.slides.js -->
    <script src="js/jquery.slides.min.js"></script>
    <!-- End SlidesJS Required -->
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="js/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
    <script type="text/javascript" src="js/source/jquery.fancybox.pack.js?v=2.1.5"></script>
    <!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
    <script>
        $('link[rel=stylesheet][href~="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"]').remove();
        $(function() {
            $('#slides').slidesjs({
                width:1500,
                height: 300,
                navigation: false,
                play: {
                    active: false,
                    auto: true,
                    interval: 5000,
                    swap: false,
                    pauseOnHover: false,
                    restartDelay: 2000
                }
            });
            $(".fancybox").fancybox();
        });
    </script>
</head>
<body>
<div id="banner">
<div class="ctn" style="box-sizing: content-box">
                <div id="slides" style="height: 300px; width:100%">
                    <img class="meo" src="images/blur_img1.jpg" />
                    <img class="meo" src="images/blur_img2.jpg" />
                    <img  class="meo"src="images/blur_img3.jpg" />
                    <a href="#" class="slidesjs-previous slidesjs-navigation"><i class="icon-chevron-left icon-large"></i></a>
                    <a href="#" class="slidesjs-next slidesjs-navigation"><i class="icon-chevron-right icon-large"></i></a>
                </div>
            </div>
    </div>
</body>